<template>
  <div class="wrapper" ref="wrap">
    <ul>
      <router-link tag="li" :to="'/strictdetails/' + item.id" class="item" v-for="item of list" :key="item.id">
        <div class="item-warpper">
          <div class="img">
            <img :src="item.imgUrl">
          </div>
          <div class="text">
            <h2>{{item.title}}</h2>
            <p>{{item.subtitle}}</p>
            <p class="text-spot">
              <span>{{item.BrightSpot.y}}</span>
              <span>{{item.BrightSpot.e}}</span>
            </p>
            <p class="text-price">
              <span class="border">{{item.PriceArea.price}}</span>
              <span class="priceFont border">{{item.PriceArea.unit}}</span>
              <span class="model">{{item.PriceArea.area}}</span>
            </p>
            <div class="right">
              <span>{{item.score}}</span>
              <p>综合评分</p>
            </div>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'StrictList',
    props: {
      list: Array
    },
    data () {
      return {}
    },
    // 生命钩子，当页面挂载时执行
    mounted () {
      // 使用 better-scroll 页面滑动插件
      this.scroll = new BScroll(this.$refs.wrap)
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    overflow hidden
    position absolute
    top 1.8rem
    left 0
    right 0
    bottom 0


  .item
    box-sizing border-box
    width 100%
    display: flex
    flex-direction column
    align-items center
    overflow hidden
    border-radius .3rem
    margin-top .5rem


  .img
    width: 100%
    height: 3rem
    position: relative
    overflow hidden


  .img img
    width: 100%
    height: 4rem

  .text
    box-sizing border-box
    width 100%
    text-align: left
    padding .3rem
    position relative

  .text
    color #798089
    font-size 0.012rem
    background: #fff

  .text h2
    font-size .4rem
    font-weight bolder
    color black
    margin-bottom .1rem


  .text .text-spot
    margin-top .5rem


  .text .text-price
    margin-top .25rem
    font-size .3rem


  .text-spot span
    background #f3f5f8
    color #9ba6aa
    margin-right .1rem
    padding .05rem .1rem
    border-radius .1rem

  .text-price .border
    font-weight bolder


  .text-price span
    color #ff9100
    font-size .3rem
    font-weight 400


  .text-price .priceFont
    font-size .2rem


  .right
    position absolute
    top .4rem
    right .3rem
    display flex
    flex-direction column
    align-items center

  .right span
    color red
    font-size .35rem

  .right p
    color #ccc
    margin-top .1rem

  .more
    width: 100%
    height: 1.066667rem
    line-height: 1.066667rem
    border-radius: .266667rem
    background: #f0f2f5
    text-align: center
    font-size: .346667rem
    font-family: PingFang-SC-Medium
    font-weight: 500
    color: #6a81a2
    margin-top: .2rem
    margin-bottom: .3rem;

  .text-price .model
    color #798089
    font-size .2rem
    margin-left .2rem

</style>
